<template>
	<view class="user">
		<view class="top">
			<image class="topbg" src="/static/index/userbg.jpg" mode="widthFix"></image>
			<view class="infobox">
				<view class="info-t">
					<image :src="info.head_url ||'/static/index/0.png'" @click="updateHead" mode="" class="header_logo">
					</image>
					<view class="userinfo" @click="showLogin">
						<button class="title">
							<text class="name" v-if="is_login">{{info.nickname || '游客'}}</text>
							<text class="name" v-else>登录/注册</text>
							<view class="level" @click="toPage('/pages/usersetup/index')">
								<uni-icons type="gear" size="28"></uni-icons>
							</view>

						</button>
						<!-- <view class="phone" v-if="is_login">
							{{indexInfo.level_name || ''}}
						</view> -->
						<view class="phone" v-if="is_login">
							{{info.phone || ''}}
							<image class="wxcode" @click="showWXcode" src="/static/icon/wx.png" mode="widthFix">
							</image>
						</view>
						<view class="phone" v-else>
							点击授权登录
						</view>
					</view>
				</view>
				<view class="info-b">
					<view class="wallet">
						<view class="wallet_info">
							<view class="info-item" @click="toPage('/pages/user/finance?type=1')">
								<text class="num">{{info.balance_1 || 0}}</text>
								<text>余额</text>
							</view>
							<view class="info-item">
								<text class="num">{{info.buy || 0}}</text>
								<text>已购订单</text>
							</view>
							<view class="info-item">
								<text class="num">{{info.accept || 0}}</text>
								<text>已接订单</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<y-login :show_login="show_login" :refer_id="refer_id" @closeLogin="closeLogin" @getUser="getUser"
			@getLogin="getLogin"></y-login>
		<view class="order">
			<view class="title">
				<text class="h3">买家中心</text>
				<text class="all" @click="toPages('/pages/order/index?id=0')">代练中心 ></text>
			</view>
			<view class="tips">
				<view class="tips-item" v-for="(item,index) in tipslist"
					@click="toPages('/pages/order/index?id='+item.id)" :key='index'>
					<image :src="item.img" mode=""></image>
					<text>{{item.name}}</text>
					<text class="num" v-if="orderCount[index]>0">{{orderCount[index]}}</text>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="title">
				<text class="h3">我的悬赏</text>
				<text class="all" @click="toPages('/pages/user/reward/order?id=0')">悬赏中心 ></text>
			</view>
			<view class="tips">
				<view class="tips-item" v-for="(item,index) in tipslist"
					@click="toPages('/pages/user/reward/order?id='+item.id)" :key='index'>
					<image :src="item.img" mode=""></image>
					<text>{{item.name}}</text>
					<text v-if="item.num>0" class="num">{{item.num}}</text>
				</view>
			</view>
		</view>

		<view class="order sever">
			<view class="title">
				<text class="h3">更多</text>
				<!-- <text class="all" >全部></text> -->
			</view>
			<view class="tips">
				<view class="tips-item" @click="toPages('/pages/user/reward/index')">
					<image src="/static/icon/xs.png" mode=""></image>
					<text>发布悬赏</text>
				</view>
				<view class="tips-item" @click="toPages('/pages/order/myorder')">
					<image src="/static/icon/jd.png" mode=""></image>
					<text>我的接单</text>
				</view>
				<view class="tips-item" @click="toPages('/pages/user/reward/rewardlist')">
					<image src="/static/icon/xsdd.png" mode=""></image>
					<text>悬赏订单</text>
				</view>
				<view class="tips-item" @click="toPages('/pages/userinfo/studio')">
					<image src="/static/icon/gr.png" mode=""></image>
					<text>我的认证</text>
				</view>
				<view class="tips-item" v-for="(item,index) in textlist" :key="index"
					@click="toPages(`/pages/about/index?type=${item.key}`)">
					<image :src="item.img" mode=""></image>
					<text>{{item.remarks}}</text>
				</view>
				<!-- <view class="tips-item" @click="toPages('/pages/code/index')">
					<uni-icons type="scan" size="28"></uni-icons>
					<text>我的邀请码</text>
				</view> -->

				<!-- <view class="tips-item" @click="toPages('/pages/address/address')">
					<uni-icons type="location" size="28"></uni-icons>
					<text>收货地址</text>
				</view> -->
				<view class="tips-item" @click="outLogin" v-if="is_login">
					<image src="/static/icon/out.png" mode=""></image>
					<text>退出登录</text>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="no-list">当前版本：{{mp_version}}</view>
			<!-- #endif -->
		</view>

	</view>
</template>

<script>
	import {
		UserInfo,
		getUserInfo,
		GetOpenid,
		GetPhone,
		getText,
		getQrCode
	} from "@/api/api.js"
	import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js'
	export default {
		data() {
			return {
				info: [],
				incomeData: [],
				isshow: false,
				is_login: false,
				tipslist: [{
						id: 0,
						name: '待付款',
						img: '/static/icon/qianbao.png',
						num: 0
					},
					{
						id: 1,
						name: '待接单',
						img: '/static/icon/dangan.png',
						num: 0
					},
					{
						id: 2,
						name: '代练中',
						img: '/static/icon/daishouhuo.png',
						num: 0
					},
					{
						id: 3,
						name: '待确认',
						img: '/static/icon/daka.png',
						num: 0
					},
				],
				open_id: '',
				show_login: false,
				indexInfo: [],
				order: [],
				textlist: {},
				mp_version: '',
				file_path: '',
				refer_id: '',
				orderCount: [0, 0, 0, 0]
			}
		},
		onLoad(e) {
			this.getText()
			var that = this
			if (e.scene) {
				//扫码识别
				let param = decodeURIComponent(e.scene)
				param = that.parseUrlParams(param)
				if (param.refer_id) {
					that.refer_id = param.refer_id
					if (!that.is_login) that.show_login = true
				}

			}
		},
		onShow() {
			this.UserInfo()
			// #ifdef MP-WEIXIN
			const accountInfo = uni.getAccountInfoSync();
			const miniProgram = accountInfo.miniProgram // 小程序 版本号
			if (miniProgram.envVersion == 'develop') {
				this.mp_version = '开发版';
			} else if (miniProgram.envVersion == 'trial') {
				this.mp_version = '体验版';
			} else if (miniProgram.envVersion == 'release') {
				this.mp_version = miniProgram.version;
			}
			// #endif
		},
		methods: {
			parseUrlParams(paramString) {
				var paramPairs = paramString.split('&');
				var params = {};

				paramPairs.reduce(function(params, pair) {
					var parts = pair.split('=');
					var key = parts[0];
					var value = decodeURIComponent(parts[1] || '');

					params[key] = value;

					return params;
				}, params);

				return params;
			},
			showWXcode() {
				getQrCode().then(res => {
					if (res.code == 0) {
						this.file_path = res.data.file_path
						uni.previewImage({
							urls: [this.file_path]
						})
					}
				})
			},
			closeLogin(e) {
				this.show_login = e
			},
			getLogin(e) {
				this.is_login = e
			},
			showLogin() {
				if (!this.is_login) {
					this.show_login = true
				}
			},
			getUser(e) {
				if (e) this.UserInfo()
			},
			getText() {
				getText().then(res => {
					if (res.code == 0) {
						this.textlist = res.data
					}
				})
			},

			updateHead() {
				if (!this.is_login) {
					return
				}
				let that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: that.$config.requestUrl +
									'/User/forUpload',
								header: {
									'token': uni.getStorageSync('token')
								},
								formData: {
									accept: 'image',
								},
								filePath: igmFile[i],
								name: 'image',
								success: (res) => {
									uni.hideLoading()
									let imgRes = JSON.parse(res.data); //微信和头条支持
									if (imgRes.code == 0) {
										let imgData = imgRes.data
										that.info.head_url = that.$config.websiteUrl + imgData
									} else {
										uni.showToast({
											title: res.message,
											icon: "none"
										})
										return
									}
								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},

			UserInfo() {
				UserInfo().then(res => {
					if (res.code == 0) {
						if (res.data.user) {
							this.info = res.data.user
							this.is_login = true
							this.orderCount = res.data.orderCount
						} else {
							this.is_login = false
						}
					} else {
						this.info = []
						this.is_login = false
					}
				})
			},
			outLogin() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确认退出登录?',
					success(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							that.info = []
							that.UserInfo()
							this.is_login = false
						}
					}
				})
			},
			changeShow() {
				this.isshow = !this.isshow
			},
			copy() {
				uniCopy({
					content: this.info.recommend_code,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			toPages(url) {

				if (!this.is_login) {
					uni.$showMsg('请先登录')

				} else {
					uni.navigateTo({
						url: url
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 94px);
		/* #endif */
	}


	.top {
		position: relative;
		height: 180px;
		overflow: hidden;

		.topbg {
			width: 100%;
		}

		.infobox {
			width: 100%;
			position: absolute;
			top: 0;
			padding-top: 10px;

			.info-t {
				padding-top: 10px;
				display: flex;
				padding-left: 5%;
			}
		}

		.header_logo {
			height: 60px;
			width: 60px;
			border-radius: 50%;
		}

		.userinfo {
			color: #000;
			flex: 1;
			margin-left: 3%;
			// background: url(@/static/index/tiaowen.png);
			background-size: 100% 100%;

			.title {
				display: flex;
				align-items: center;
				background: transparent;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
				text-align: left;
				justify-content: space-between;
				line-height: 20px;

				&::after {
					border: 0;
				}

				image {
					width: 20px;
					height: 20px;
				}

				.name {
					display: block;
					width: 50%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 17px;
					font-weight: bold;
				}

				.level {
					position: relative;
					line-height: 20px;
					padding-right: 5%;
					z-index: 99;
				}



				.share {
					margin-left: 15%;
				}
			}

			.phone {
				font-size: 24rpx;
				margin-top: 8px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 4%;

				.wxcode {
					width: 32px;
				}
			}

			.code {
				display: flex;
				align-items: center;

				.code-text {
					font-size: 13px;
					max-width: 55%;
					display: block;
				}

				.copy {
					background: #F1D3A8;
					color: #6C2A09;
					padding: 1% 3%;
					border-radius: 5px;
					font-size: 13px;
					margin-left: 5%;
				}

				image {
					width: 16px;
					height: 13px;
					margin-left: 10%;
				}
			}
		}

	}

	.wallet {
		width: 96%;
		margin: 0 auto;
		color: #000;
		position: relative;

		.tixian {
			padding-top: 30px;
			padding-left: 5%;

			text {
				font-size: 22px;
			}
		}

		.tixian_now {
			position: absolute;
			right: 5%;
			top: 15%;
			border-radius: 20px;
			background: #ffffffb3;
			color: #C6A06F;
			padding: 1% 4%;
			font-size: 14px;
		}

		.wallet_info {
			display: flex;
			justify-content: space-around;
			text-align: center;
			margin-top: 20px;

			view {
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: 12px;

				.num {
					font-weight: bold;
					font-size: 16px;
					margin-bottom: 5px;
				}
			}
		}
	}

	.order {
		padding: 0 10px;
		background: #fff;
		padding-bottom: 40rpx;
		width: 96%;
		box-sizing: border-box;
		margin: 0 auto;
		margin-bottom: 30px;
		margin-top: -20px;
		border-radius: 8px;
		z-index: 87;
		position: relative;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 5% 0;
			border-bottom: 1px solid #efefef;

			.h3 {
				font-weight: bold;
				color: #000;
				font-size: 17px;
			}

			.all {
				color: #999999;
				font-size: 14px;
			}
		}

		.tips {
			display: flex;
			justify-content: space-around;
			margin-top: 30rpx;

			.tips-item {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				position: relative;

				.num {
					background: #FF3C29;
					color: #fff;
					font-size: 12px;
					border-radius: 50%;
					width: 20px;
					height: 20px;
					top: -10px;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					transform: scale(.8);
				}

				image {
					width: 24px;
					height: 24px;
				}

				text {
					font-size: 13px;
					margin-top: 10rpx;
					color: #777777;
				}
			}
		}
	}

	.sever {
		.tips {
			display: table;
			width: 100%;
		}

		.tips-item {
			float: left;
			width: 25%;
			margin-bottom: 30rpx;
		}
	}
</style>